import { Component, OnInit } from '@angular/core';
import {Hero} from '../hero';
// import {HEROES} from '../mock-heroes';
import { HeroService } from '../hero.service'

//@Component 是个装饰器函数，用于为该组件指定 Angular 所需的元数据
@Component({
  selector: 'app-heroes',//CSS element selector,用来匹配父组件的moban中hlml标签，以识别该组件
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})

//始终要 export 这个组件类，以便在其它地方（比如 AppModule）导入它。
export class HeroesComponent implements OnInit {

  // 往类中添加一个 heroes 属性，这样可以暴露出这些英雄，以供绑定。
  // heroes=HEROES;
  heroes: Hero[];
  
  selectedHero:Hero;


  // 这个参数同时做了两件事：1. 声明了一个私有 heroService 属性，2. 把它标记为一个 HeroService 的注入点。
  // 当 Angular 创建 HeroesComponent 时，依赖注入系统就会把这个 heroService 参数设置为 HeroService 的单例对象。
  
  //通过查看该组件类的构造函数，来决定该组件依赖哪些服务或其它依赖项
  constructor(private heroService: HeroService) { }
  
  //ngOnInit 是一个生命周期钩子，Angular 在创建完组件后很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方。
  ngOnInit() {
    this.getHeroes();
  }
  
  onSelect(hero:Hero):void{
    this.selectedHero=hero;
  }

  // 创建一个函数，以从服务中获取这些英雄数据。
  // 你固然可以在构造函数中调用 getHeroes()，但那不是最佳实践。

  // 让构造函数保持简单，只做初始化操作，比如把构造函数的参数赋值给属性。 构造函数不应该做任何事。
  //  它肯定不能调用某个函数来向远端服务（比如真实的数据服务）发起 HTTP 请求。

  // 你应该改为在 ngOnInit 生命周期钩子中调用 getHeroes()，并且等 Angular 构造出 HeroesComponent 的实例之后，
  // 找个恰当的时机调用 ngOnInit。
  getHeroes(): void {
    this.heroService.getHeroes()
        .subscribe(heroes => this.heroes=heroes);
    //异步
    //新的版本等待 Observable 发出这个英雄数组，这可能立即发生，也可能会在几分钟之后。 
    //然后，subscribe 函数把这个英雄数组传给这个回调函数，该函数把英雄数组赋值给组件的 heroes 属性。
    //使用这种异步方式，当 HeroService 从远端服务器获取英雄数据时，就可以工作了
  }
  




}
